<template>
  <Layout>
    <div class="flex grow">
      <div class="flex grow column">
        <Container name="机构调研">
          <div class="loading flex grow column" v-show="toLoding || toMore">
            <Loading v-show="toLoding" size="24px" vertical>加载中...</Loading>
            <img
              :src="PIC_URL + '/tlbypcWeb/wushuju.png'"
              v-show="toMore"
              alt=""
            />
          </div>
          <div class="stock" v-show="!toLoding && !toMore">
            <table>
              <thead>
                <tr>
                  <td width="15%">序号</td>
                  <td width="15%">代码</td>
                  <td width="15%">名称</td>
                  <td width="15%">最新</td>
                  <td width="20%">成交量</td>
                  <td width="20%">成交额</td>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, i) in researchStock"
                  :key="item.id"
                  @click="showArticleDetail(item.articleId, item.stockName)"
                  @dblclick="stockDetail(item.stockCode)"
                >
                  <td>{{ i + 1 }}</td>
                  <td>{{ item.stockCode.match(/\d{6}/)[0] }}</td>
                  <td>{{ item.stockName }}</td>
                  <td>{{ item.current }}</td>
                  <td>{{ item.rise + "手" }}</td>
                  <td>{{ item.toUp }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </Container>
      </div>
      <div class="wrapR flex grow column">
        <div class="info flex shrink column">
          <div class="infoBox flex">
            <div class="infoItem grow column">
              <p>接待机构数量</p>
              <p>{{ articleDetail.surveyNum }}</p>
            </div>
            <div class="infoItem grow column">
              <p>接待方式</p>
              <p>{{ articleDetail.receptionWays }}</p>
            </div>
            <div class="infoItem grow column">
              <p>接待日期</p>
              <p>{{ articleDetail.receptionTime }}</p>
            </div>
            <div class="infoItem grow column">
              <p>公告日期</p>
              <p>{{ articleDetail.noticeTime }}</p>
            </div>
          </div>
        </div>
        <Container name="调研解读">
          <div class="loading flex grow column" v-show="toLoding || toMore">
            <Loading v-show="toLoding" size="24px" vertical>加载中...</Loading>
            <img
              :src="PIC_URL + '/tlbypcWeb/wushuju.png'"
              v-show="toMore"
              alt=""
            />
          </div>
          <div class="detail" ref="detail">
            <div class="title">{{ articleDetail.title }}</div>
            <div class="time">{{ articleDetail.time }}</div>
            <div
              class="txt"
              @click="viewImg($event)"
              v-html="articleDetail.detail"
            ></div>
          </div>
        </Container>
      </div>
    </div>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
  </Layout>
</template>

<script>
import { Loading } from "vant";
import Layout from "@/component/Layout";
import Container from "@/component/Container";
import openImg from "@/component/openImg";
import { imgPath } from "../../script/fn";
import {
  queryArticleStock,
  userClickUpdate,
  queryArticleList,
} from "../../api/api";
import behavior from "@/utils/behavior";
import stockPush from "../../script/stockPush";

import {
  getUrlParams,
  blockStock,
  isOneMinu,
  stockMarker,
} from "../../script/fn";

import dayjs from "dayjs";
const userData = { ...behavior };

export default {
  components: { Layout, Loading, Container, openImg },
  data() {
    return {
      articleList: [],
      researchStock: [],
      articleDetail: {
        title: "",
        time: "",
        detail: "",
        articleId: "",
        surveyNum: "", //接待机构数量
        receptionWays: "", //接待方式
        receptionTime: "", //接待日期
        noticeTime: "", //公告日期
      },
      toLoding: true,
      toMore: false,
      imgSrc: "",
    };
  },
  computed: {},
  mounted() {
    this.queryArticleStock();
  },
  methods: {
    async userClick() {
      const { token } = getUrlParams();
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.module.moduleCode = "0006";
      userData.user.token = token;
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventSubject.endtime = "";
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey = this.articleDetail.articleId;
      userData.event[0].eventSubject.extend.openTime = openTime;
      if (!isOneMinu()) return;
      userClickUpdate(userData).then((data) => {
        // return data.data;
      });
    },
    stockDetail(code) {
      stockMarker(code, "今日风口");
    },
    async queryArticleStock() {
      await queryArticleStock({
        productId:
          getUrlParams().productId || localStorage.getItem("productId"),
      }).then((back) => {
        if (back.status == 1) {
          this.ArticleStock = back.data;
          this.queryArticleList();
        }
      });
    },
    async queryArticleList() {
      const arr = this.ArticleStock.filter(
        (item) => item.articleTypeName == "机构调研"
      );
      let articleTypeId = arr.length != 0 ? arr[0].articleTypeId : "";
      await queryArticleList({
        articleType: articleTypeId,
      }).then((data) => {
        this.toLoding = false;
        if (data.data.length == 0) return (this.toMore = true);
        this.articleList = data.data;
        const researchStock = [];
        data.data.map((item) =>
          item.researchStock.map((it) => researchStock.push(it))
        );
        stockPush({
          id: "researchStock",
          source: researchStock,
          codes: this.getCodes(researchStock),
          callback: ({ id, value }) => {
            if (id == "researchStock") {
              this[id] = value;
            }
          },
        });
        this.showDetail(data.data[0]);
      });
    },
    getCodes(stock) {
      return stock
        .map((it) => it.stockCode.match(/\d{6}/)[0])
        .join(",")
        .split(",");
    },
    showArticleDetail(id, stockName) {
      const article = this.articleList.find((it) => it.articleId == id);
      const stockIndex = article.researchStock.findIndex(
        (it) => it.stockName == stockName
      );

      this.showDetail(article, stockIndex);
    },
    //查看图片
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
    showDetail(data, index = 0) {
      this.$nextTick(() => {
        this.$refs.detail.scrollTop = 0;
      });
      const {
        publishTime,
        articleTitle,
        articleContent,
        researchStock,
        articleId,
      } = data;
      // this.articleDetail.time = format(publishTime, "yyyy-MM-dd HH:mm");

      this.articleDetail.time = dayjs(publishTime).format("YYYY-MM-DD HH:MM");
      this.articleDetail.title = articleTitle;
      this.articleDetail.detail = imgPath(articleContent);
      this.articleDetail.articleId = articleId;
      this.articleDetail.surveyNum = researchStock[index].surveyNum;
      this.articleDetail.receptionWays = researchStock[index].receptionWays;
      this.articleDetail.receptionTime = dayjs(
        researchStock[index].receptionTime
      ).format("YYYY-MM-DD");
      this.articleDetail.noticeTime = dayjs(
        researchStock[index].noticeTime
      ).format("YYYY-MM-DD");
      this.userClick();
    },
  },
};
</script>
<style>
.txt img {
  width: 100%;
}
</style>
<style scoped lang="scss">
.loading {
  justify-content: center;
  align-items: center;
}
.stock {
  overflow-y: auto;
  table {
    width: 100%;
    line-height: 28px;
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0;
    thead {
      color: #2a81ad;
    }
    tr {
      td {
        &:nth-child(2),
        &:nth-child(3) {
          text-align: left;
        }
        &:first-child {
          text-align: left;
          padding-left: 16px;
        }
        &:nth-child(4),
        &:nth-child(5) {
          text-align: right;
        }
        &:last-child {
          text-align: right;
          padding-right: 16px;
        }
      }
    }
    tbody {
      color: #3bacdb;
      tr {
        cursor: pointer;
        // .red {
        //   color: #e43b3b;
        // }
        // .green {
        //   color: #35c264;
        // }
        &:hover {
          background: #112761;
        }
      }
    }
  }
}
.wrapR {
  margin-left: 18px;
  max-width: 604px;
  .info {
    height: 83px;
    margin-bottom: 18px;
    .infoBox {
      .infoItem {
        width: 143px;
        height: 83px;
        // background: url(../../images/mokuai_bg.png) no-repeat center;
        background: url($PIC_URL + "/tlbypcWeb/getdevices/mokuai_bg.png")
          no-repeat center;
        margin-right: 11px;
        font-size: 16px;
        color: #36a5dd;
        padding: 15px 0;
        line-height: 27px;
        box-sizing: border-box;
        text-align: center;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .detail {
    overflow-y: auto;
    margin-bottom: 20px;
    padding: 0 26px 20px;
    .title {
      color: #45c8ff;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
    .time {
      font-size: 14px;
      color: #45c8ff;
      font-weight: 400;
      margin: 10px 0;
      text-align: center;
    }
    .txt {
      font-size: 16px;
      color: #3bacdb;
      line-height: 28px;
      font-weight: 400;
      text-align: justify;
      word-break: break-all;
    }
  }
}
</style>
